<template>
  <nav>
    <ul class="pager">
      <li :class="{disabled: currentPage == 0 || totalPage == 0}"><a href="#" @click.prevent="previousPage($event)">上一页</a></li>
      <li :class="{disabled: currentPage == totalPage-1 || totalPage == 0}"><a href="#" @click.prevent="nextPage($event)">下一页</a></li>
    </ul>
  </nav>
</template>

<script type='text/babel'>
  export default {
    props: {
      currentPage: {
        type: Number,
        default: 0
      },
      totalPage: {
        type: Number,
        default: 0
      }
    },
    vuex: {
      actions: {
        previousPage: function (store, event) {
          var self = this
          if (self.currentPage === 0 || self.totalPage === 0) {
            return
          }

          if (--self.currentPage < 0) {
            self.currentPage = 0
          }
          store.dispatch('ON_PREVIOUS_PAGE', this, this.currentPage)
        },
        nextPage: function (store, event) {
          var self = this
          if (self.currentPage === self.totalPage - 1 || self.totalPage === 0) {
            return
          }
          if (++self.currentPage > self.totalPage - 1) {
            self.currentPage = self.totalPage
          }
          store.dispatch('ON_NEXT_PAGE', this, this.currentPage)
        }
      }
    }
  }
</script>

<style>
</style>
